<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: red;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
<template>
  <div>
    <el-form ref="addForm" :model="addNew" :rules="rules" label-width="150px"
             style="width: 1000px;position:relative;overflow: hidden;height: 600px">
      <el-form-item label="类别id" prop="categoryId">
        <el-cascader :options="categoryTable" :props="{ expandTrigger: 'hover' }"
                     @change="categoryChange"/>
      </el-form-item>
      <el-form-item label="场地名称" prop="name">
        <el-input v-model="addNew.name"/>
      </el-form-item>
      <el-form-item label="场地描述" prop="description">
        <el-input v-model="addNew.description"/>
      </el-form-item>
      <el-form-item label="图片" prop="url">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/zx-resource/resources/upload/image/product"
            :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="handleAvatarChange">
          <img v-if="addNew.url" :src="addNew.url" class="avatar" alt="404">
          <i v-else class="el-icon-plus avatar-uploader-icon"/>
        </el-upload>
      </el-form-item>
      <el-form-item label="状态" prop="isEnable">
        <el-switch v-model="addNew.isEnable" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用"/>
      </el-form-item>
      <el-form-item label="单价" prop="price">
        <el-input v-model="addNew.price"/>
      </el-form-item>
      <el-form-item label="序号" prop="sort">
        <el-input v-model="addNew.sort"/>
      </el-form-item>
      <el-form-item style="position: absolute;left: 50%;bottom: 0;transform: translateX(-71%)">
        <el-button type="primary" @click="submitForm()">添加</el-button>
        <el-button type="danger" @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "courtAddNew",
  data() {
    return {
      categoryChoice: "",
      addNew: {
        categoryId: "",
        name: "",
        description: "",
        url: "",
        isEnable: "",
        price: "",
        sort: "",
      },
      rules: {
        categoryId: [],
        name: [],
        description: [],
        url: [],
        status: [],
        price: [],
        sort: [],
      },
      categoryTable: []
    }
  },
  methods: {
    handleAvatarChange(value){

    },
    categoryChange(value) {
      this.addNew.categoryId = value[value.length - 1];
    },
    handleAvatarSuccess(response) {
      this.addNew.url = response.data.url
    },
    submitForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let url = "http://localhost:9999/zx-court/court/addNew";
          let addNewData = this.qs.stringify(this.addNew);
          this.axios.create(
              {'headers': {'Authorization': localStorage.getItem('adminJwt')}}
          ).post(url, addNewData).then((response) => {
            if (response.data.state === 200) {
              this.$message({message: "已添加场地，刷新并返回场地列表", type: "success"});
              this.$emit("changeTab", "courtList");
            } else {
              this.$message({message: response.data.message, type: "error"})
            }
          })
        } else {
          this.$message({message: "有数据不符合规范", type: "error"})
        }
      });
    },
    resetForm() {
      this.$refs.addForm.resetFields();
    },//用于清除el-form内所有内容
    loadCategory() {
      let url = "http://localhost:9999/zx-court/category/treeList"
      this.axios.create(
          {'headers': {'Authorization': localStorage.getItem('adminJwt')}}
      ).get(url).then((response) => {
        let result = response.data
        if (result.state === 200) {
          this.categoryTable = response.data.data;
        } else {
          this.$message({message: result.message, type: "error"})
        }
      })
    }
  },
  mounted() {
    this.loadCategory()
  }
}
</script>

